<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="2" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							签订安全责任书
						</div>
					</div>
					<div class="login-box">
						<div class="download-box">
							<div class="download-file-icon-box">
								<img src="../assets/file-icon.png" alt="">
							</div>
							<div class="download-title-box">
								<span>安全责任书模版文件下载</span>
							</div>
							<a href="http://meeting.gongyingdao.com/%E5%8F%82%E5%B1%95%E5%95%86%E5%AE%89%E5%85%A8%E8%B4%A3%E4%BB%BB%E4%BF%9D%E8%AF%81%E4%B9%A60907V2.docx"
								target="_blank">
								<div class="download-icon-box">
									<img src="../assets/download-icon.png" alt="">
									<p>下载</p>
								</div>
							</a>
						</div>
						<div class="download-box download-box-2">
							<div class="download-help-box">
								<span>请您下载安全责任书模板文件，确认阅读无误</span>
							</div>
						</div>
					</div>
					<div class="login-box login-box-2">
						<div class="download-box">
							<div class="download-file-icon-box">
								<img src="../assets/file-icon.png" alt="">
							</div>
							<div class="download-title-box">
								<span>安全责任书模版文件上传</span>
							</div>
							<div class="download-icon-box" @click="save">
								<img src="../assets/download-icon.png" alt="">
								<p>提交</p>
							</div>
						</div>
						<div class="download-box download-box-2">
							<div class="download-help-box">
								<span>请您将加盖公章的安全责任书扫描件(JPG、PDF格式)通过下表进行提交。</span>
							</div>
						</div>
						<el-upload class="avatar-uploader" action="' '" :file-list="fileList" :http-request="saveFile"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
						<div class="download-upload-help-box">
							<span>提交须知:双击区域上传图片,支持提交文件的扩展名为"JPG、PDF"，文件大小勿超过2M。</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		uploads
	} from "/src/api/upload.js";
	import {
		show,
		create
	} from "/src/api/agreement.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	import {
		Plus
	} from '@element-plus/icons-vue'
	export default {
		name: 'ExhibitorsDownloadComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent,
			Plus
		},
		props: {
			msg: String
		},
		data() {
			return {
				activeIndex: '2',
				imageUrl: '',
				upload_file: ''
			};
		},
		methods: {
			show() {
				show().then(data => {
					if (data.data.code == 200) {
						if (data.data.data.files) {
							this.imageUrl = data.data.data.files;
						}
					} else {
						this.$message({
							message: data.data.message,
							type: 'error'
						});
					}
				})
			},
			beforeAvatarUpload(file) {
				const allowedTypes = ['pdf', 'jpg'];
				const extension = file.name.split('.').pop().toLowerCase();
				const isAllowed = allowedTypes.includes(extension);
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isAllowed) {
					this.$message.error('只能上传JPG, PDF文件!');
					return false;
				}

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isAllowed && isLt2M;
			},
			saveFile(param) {
				uploads(param.file).then(data => {
					this.imageUrl = data.data.data;
				});
			},
			save() {
				if (!this.imageUrl) {
					this.$message.error('请上传图片!');
					return;
				}
				create(this.imageUrl).then(data => {
					if (data.data.code == 200) {
						this.$message({
							message: '上传成功！',
							type: 'success'
						});
					} else {
						this.$message({
							message: data.data.message,
							type: 'error'
						});
					}
				})
			}
		},
		mounted() {
			this.show();
		}
	}
</script>

<style scoped>
	.download-upload-help-box {
		text-align: left;
		width: 820px;
		margin: auto;
		color: #2B64A8;
		margin-top: 20px;
		font-size: 16px;
	}

	.login-box-2 {
		height: 300px !important;
	}

	:deep(.avatar-uploader .el-upload) {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	:deep(.avatar-uploader .el-upload:hover) {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 130px;
		height: 130px;
		line-height: 130px;
		text-align: center;
	}

	.avatar {
		width: 130px;
		height: 130px;
		display: block;
	}

	.avatar-uploader {
		width: 180px;
		height: 180px;
	}

	.download-box-2 {
		border-bottom: 0px !important;
	}

	.download-help-box {
		float: left;
		font-size: 15px;
		color: #999999;
		line-height: 18px;
		letter-spacing: 2px;
	}

	.download-icon-box p {
		color: #fff;
		font-size: 15px;
		float: left;
		margin-left: 7px;
		line-height: .5;
	}

	.download-icon-box img {
		width: 15px;
		height: 15px;
		float: left;
		margin-top: 10px;
		margin-left: 20px;
	}

	.download-icon-box a {
		text-decoration: none
	}

	.download-icon-box {
		width: 100px;
		height: 35px;
		background: #2B64A8;
		float: right;
		border-radius: 4px;
		margin-top: -5px;
	}

	.download-title-box span {
		line-height: 1.4;
	}

	.download-title-box {
		float: left;
		font-weight: 600;
		font-size: 18px;
		color: #333333;
		line-height: 24px;
		letter-spacing: 2px;
		margin-left: 15px;
	}

	.download-file-icon-box img {
		width: 26px;
		height: 24px
	}

	.download-file-icon-box {
		float: left
	}

	.download-box {
		width: 820px;
		margin: auto;
		height: 40px;
		border-bottom: 1px solid #DDDFE4;
		border-bottom-style: dashed;
		margin-top: 15px;
	}

	.login-box {
		width: 870px;
		height: 110px;
		border: 1px #eeeeee solid;
		margin: 20px auto;
		border-radius: 3px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 560px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>